<template>
	<view><view class="navigationbar">
			<view  v-for="(item,index) in textlist"  :key="index">
				<view class="list_top" :class="{list:current==index}" @click="switch_pages(index)">
					<b :class="{b:current==index}">{{item}}</b>
					<hr :class="{active:current==index}" v-if="current==index"/>
				</view>
			</view>
		
		</view>
		<view v-if="current==0" class="event" v-for="(item,index) in event" :key="index" @click="details(item)">
			<view class="name">
				<view class="dot">
					<view></view>
				</view>
				<text class="text">{{item.processInsName}}</text>
			</view>
			<view class="date">
				<text class="text">{{item.startTime}}</text>
				<text>提交人:{{item.operatorText}}</text>
			</view>
			<hr class="line" />
			<view class="handle">
				<text class="text">{{item.flowName}}</text>
			<!-- 	<view class="dot">
					<view :class="{view:1==1}"></view>
					<text :class="{text:2<=item.value}">------------</text>
					<view :class="{view:2<=item.value}"></view>
					<text :class="{text:3<=item.value}">------------</text>
					<view :class="{view:3<=item.value}"></view>
					<text :class="{text:3<=item.value}">------------</text>
					<view :class="{view:3<=item.value}"></view>
				</view>
				<view class="processcontrol">
					<text :class="{text:1==1}">提交</text>
					<text :class="{text:2<=item.value}">所属部门审批</text>
					<text :class="{text:3<=item.value}">经理审批</text>
					<text :class="{text:3<=item.value}">完结</text>
				</view> -->
			</view>
		</view>
		<view v-if="current==1" class="event" v-for="(item,index) in auditedlist" :key="index" >
			<view class="name">
				<view class="dot">
					<view></view>
				</view>
				<text class="text">{{item.auditType}}</text>
			</view>
			<view class="date">
				<text class="text">{{item.auditTime}}</text>
				<text>提交人:{{item.auditorText}}</text>
			</view>
			<hr class="line" />
			<view class="handle">
				<text class="text">{{item.auditResultText}}</text>
			<!-- 	<view class="dot">
					<view :class="{view:1==1}"></view>
					<text :class="{text:2<=item.value}">------------</text>
					<view :class="{view:2<=item.value}"></view>
					<text :class="{text:3<=item.value}">------------</text>
					<view :class="{view:3<=item.value}"></view>
					<text :class="{text:3<=item.value}">------------</text>
					<view :class="{view:3<=item.value}"></view>
				</view>
				<view class="processcontrol">
					<text :class="{text:1==1}">提交</text>
					<text :class="{text:2<=item.value}">所属部门审批</text>
					<text :class="{text:3<=item.value}">经理审批</text>
					<text :class="{text:3<=item.value}">完结</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					textlist: ['待审核列表', '已审核列表'],
					current: 0,
					event:[{
						value:0,
					}],
					auditedlist:[],
				}
			},
			onLoad() {
				this.toDoEvent();
				this.reviewed();
			},
			methods: {
				async toDoEvent(){
					const res = await this.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-flow/api/selectTaskInsListPending',
							method: "get",
							data: {
								
							},
						})
					if(res.success==true){
						this.event=res.data.result
						for (let i = 0; i < this.event.length; i++){
							if(this.event[i].taskName=="所属部门经理审批"){
								this.event[i].value=2
							}else if(this.event[i].taskName=="经理审批"){
								this.event[i].value=3
							}
						}
					}
				},
				/*已经审核*/
				async reviewed(){
					const res = await this.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-flow/flowQuery/auditList',
							method: "get",
							data: {
								
							},
						})
					if(res.success==true){
						// console.log(JSON.stringify(res.body.list),"历史接口1")
						this.auditedlist=res.body.list
					}
				},
				details(item){
					console.log(item.flowNo,item.flowName)
					if(item.flowNo=="预留资产调拨"){
					}else if(item.flowNo=="wfAssetDamage"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/lossReporting?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfAssetMaintain"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/reportForRepair?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfAssetChange"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/changesInAssets?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfStoreApply"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/materialRequisition?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfReservation"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/reserve?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfSubscription"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/subscription?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfStoreCheck"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/inventoryCorrection?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}else if(item.flowNo=="wfAgreement"){
						uni.navigateTo({
							url: '/pages/approve/approvalDetails/serviceSigning?businessId='+item.taskInstanceId + '&processInsName=' + item.processInsName+'&flowNo=' + item.flowNo+'&flowName='+item.flowName
						})
					}
				},
				switch_pages(index) {
					this.current = index;
					console.log(this.current)
				},
			}
		}
</script>

<style lang="scss">
	.event{
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 40rpx;
		width: 100%;
		height: 220rpx;
		background-color: #ffffff;
		hr{
			width: 94%;
			height: 1px;
			border: 0;
			background-color: #EBEFF6;
			margin: 0 auto;
		}
		.handle{
			// padding-left: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			width: 100%;
			font-size: 10px;
			color: #cbc8ce;
			// background-color: #3F536E;
			.text{
				position: absolute;
				left: 60rpx;
			}
			.dot{
				display: flex;
				height: 60rpx;
				width: 100%;
				line-height:60rpx ;
				align-items:center;
				view{
					border: 1px solid #cbc8ce;
					border-radius: 50rpx;
					height: 20rpx;
					width: 20rpx;
				}
				.view{
					background-color: #55aaff;
					border: 1px solid #55aaff;
					border-radius: 50rpx;
					height: 20rpx;
					width: 20rpx;
				}
				.text{
					color: #55aaff;
				}
		    }
			.processcontrol{
				display: flex;
				height: 60rpx;
				width: 100%;
				// background-color: #00ffff;
				class:nth-child(1){
					margin-right: 100rpx;
				}
				class:nth-child(2){
					margin-right: 70rpx;
				}
				class:nth-child(3){
					margin-right: 120rpx;
				}
				.class{
					color: #cbc8ce;
				}
				.text{
					color: #55aaff;
				}
			}
		}
		.date{
			display: flex;
			justify-content: space-around;
			// padding-left: 60rpx;
			height: 40rpx;
			line-height: 40rpx;
			width: 100%;
			// background-color: #aaffff;
			font-size: 10px;
			color: #cbc8ce;
			text:first-child{
				position: relative;
				right: 4%;
			}
			text:last-child{
				position: relative;
				left: 8%;
			}
		}
		.name{
			display: flex;
			height: 60rpx;
			line-height: 60rpx;
			width: 100%;
			// background-color: #3F536E;
			.dot{
				display: flex;
				height: 60rpx;
				width: 60rpx;
				line-height:60rpx ;
				justify-content: center;
				justify-items:center;
				align-items:center;
				// background-color: #55ff00;
				view{
					border-radius: 25px;
					height: 20rpx;
					width: 20rpx;
					background-color: #ffaa00;
				}
		    }
		}
	}
	.navigationbar{
		width: 100%;
		height: 69rpx;
		background: #FFFFFF;
		// display: flex;
		// justify-content: space-around;
		line-height: 69rpx;
		text-align: center;
		padding-bottom:3px;
		.list_top{
			width: 50%;
			float: left;
			padding-bottom:3px;
			position: relative;
			
			hr{
				position: absolute;
				bottom: 0;
				background-color: #109EF8;
			}
			.active {
				width: 100%;
				border: none;
				height: 4rpx;
				position: absolute;
				bottom: 0;
				// background-color: #109EF8;
			}
			b{
				color: #747474;
			}
			.b{
				color: #050505;
			}
		}
		.list{
			height: 69rpx;
		}
	}
</style>
